<template>
  <div class="search-panel">
    <el-row class="m-header-searchbar">
      <el-col :span="3" class="left">
        <img
          src="https://s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png"
          alt=""
        />
      </el-col>
      <el-col :span="15" class="center">
        <div class="wrapper">
          <el-input
            v-model="searchWord"
            placeholder="请输入内容"
            @focus="isFocus"
            @blur="isBlur"
            @input="input"
          ></el-input>
          <el-button type="primary" icon="el-icon-search"></el-button>
          <dl class="searchList" v-if="isSearchList">
            <dd v-for="item in searchList" :key="item.id">
              <router-link :to="{ name: 'goods', params: { name: item } }">{{
                item
              }}</router-link>
            </dd>
          </dl>
        </div>
      </el-col>
    </el-row>
  </div>
</template> 

<script>
import api from "@/api/index";
export default {
  data() {
    return {
      searchWord: "",
      isFacus: false,
      searchList: ["火锅", "美食", "烧烤"],
    };
  },

  methods: {
    input() {
      api.getSearchList().then((res) => {
        this.searchList = res.data.data.list;
      });
    },

    isFocus() {
      this.isFacus = true;
    },
    isBlur() {
      let _this = this;
      setTimeout(() => {
        _this.isFacus = false;
      }, 100);
    },
  },
  computed: {
    isSearchList() {
      return this.isFacus && this.searchWord;
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/public/header/search.scss";
</style>